/**
 * Copyright (c) 2021 zhaodongyang
   CurtainJs is licensed under Mulan PSL v2.
   You can use this software according to the terms and conditions of the Mulan PSL v2.
   You may obtain a copy of Mulan PSL v2 at:
            http://license.coscl.org.cn/MulanPSL2
   THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
   See the Mulan PSL v2 for more details.
 */

import {Point} from '../../../common/js/Point.js'
import {Rect} from '../../../common/js/Rect.js'
import views from '../viewsample/views.js'
import prompt from '@system.prompt';

export default {
    data: {
        canShow: true,
        canvasColor: '#FF4455',
        clickButton: [{
                          text: "",
                          position: new Rect(0, 0, 0, 0)
                      }]
    },
    onShow() {
        let context = this
        setTimeout(function () {
            try {
                let canvas = context.$element('hilightCanvas')
                let contentView = context.$child('contentView')
                views.initHighLightData(contentView)
                context.canvasColor = views.data.canvasColor
                let ctx = canvas.getContext('2d')
                //设置高亮背景色
                ctx.fillStyle = context.canvasColor
                let canvasWidth = canvas.getBoundingClientRect().width
                let canvasHeight = canvas.getBoundingClientRect().height
                ctx.clearRect(0, 0, canvasWidth, canvasHeight);
                ctx.fillRect(0, 0, canvasWidth, canvasHeight);
                let viewData = views.data.configList
                if (viewData == null || viewData.length < 1) {
                    return
                }
                // 绘制高亮部分
                for (var i = 0; i < viewData.length; i++) {
                    let hightLightConfig = viewData[i]
                    if (hightLightConfig.isDraw) {
                        ctx.clearRect(hightLightConfig.left, hightLightConfig.top, hightLightConfig.width, hightLightConfig.height);
                    }
                    if (hightLightConfig.id == 'btCircle') {
                        context.drawTipText(ctx, hightLightConfig, canvasWidth, canvasHeight)
                        //画下方的按钮
                        var rectButton = new Rect((canvasWidth / 2 - 50), (canvasHeight - 60), 100, 40);
                        context.clickButton.splice(0)
                        context.clickButton.push({
                            position: rectButton,
                            id: "page1"
                        })
                        context.drawRoundedRect(rectButton, 20, ctx, "#FFFFFF", "我知道了")
                    }
                }
            } catch (err) {
                console.log("测试打印===err 1===" + err)
            }
        }, 100)

    },
//画蒙层上面的提示文字
    drawTipText(ctx, hightLightConfig, canvasWidth, canvasHeight) {
        ctx.beginPath();
        ctx.fillStyle = "#FFFFFF";
        ctx.font = "normal bold 20px Arial,sans-serif";
        ctx.textAlign = "left";
        ctx.textBaseline = "middle";

        let text = "自定义识别View背景形状，也可以自己制定和定义高亮形状";
        let textMarginleft = 20 // 绘制的文字距离左测高亮button的左边的距离
        let textMarginRight = 20 // 绘制的文字距离屏幕右边的距离
        let textMarginTop = 30 // 绘制的文字距离左测高亮button顶部的距离
        let textNextLineMargin = 25 // 绘制的文字下一行与上一行之间的间距

        let beginX = (hightLightConfig.left + hightLightConfig.width + textMarginleft)
        let maxWidth = canvasWidth - beginX - textMarginRight
        let beginY = hightLightConfig.top + textMarginTop
        let tempArr = [0]

        var tempStart = 0

        //处理文字过多的情况 记录文字达到边界时的index 到时手动换行
        for (var j = 1; j < text.length; j++) {
            var tempStr = text.substring(tempStart, j)
            var tempWidth = ctx.measureText(tempStr).width
            if (tempWidth >= maxWidth) {
                tempStart = j
                tempArr.push(j)
            }
        }
        tempArr.push(text.length)
        var addY = 0 // 每一行文字距离最开始绘制的时候的距离
        //处理文字过多的情况 根据记录的index 手动将文字分割多行绘制
        for (var m = 0; m < (tempArr.length - 1); m++) {
            var start = tempArr[m]
            var end = tempArr[(m + 1)]
            ctx.fillText(text.substring(start, end), beginX, (beginY + addY));
            addY = addY + textNextLineMargin
        }
    },
//画蒙层上面的确定按钮
    drawRoundedRect(rect, r, ctx, color, text) {
        var ptA = new Point(rect.x + r, rect.y);
        var ptB = new Point(rect.x + rect.width, rect.y);
        var ptC = new Point(rect.x + rect.width, rect.y + rect.height);
        var ptD = new Point(rect.x, rect.y + rect.height);
        var ptE = new Point(rect.x, rect.y);

        // 画button
        ctx.strokeStyle = color;
        ctx.setLineDash([]);
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(ptA.x, ptA.y);
        ctx.arcTo(ptB.x, ptB.y, ptC.x, ptC.y, r);
        ctx.arcTo(ptC.x, ptC.y, ptD.x, ptD.y, r);
        ctx.arcTo(ptD.x, ptD.y, ptE.x, ptE.y, r);
        ctx.arcTo(ptE.x, ptE.y, ptA.x, ptA.y, r);
        ctx.stroke();

        // 画button的文字
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.font = 16 + "px 黑体";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        let beginX = rect.width / 2 + rect.x
        let beginY = rect.height / 2 + rect.y
        ctx.fillText(text, beginX, beginY);
    },
    dissMiss(e) {
        var touchX = 0
        var touchY = 0
        if (e != null && e.touches != null && e.touches.length > 0) {
            touchX = e.touches[0].localX
            touchY = e.touches[0].localY
        }
        let context = this
        let done = false
        let hide = false
        for (var i = 0; i < context.clickButton.length; i++) {
            let clickRecf = context.clickButton[i]
            if (clickRecf.position.contains(touchX, touchY) && clickRecf.id == "page1") {
                done = true
                break
            } else if (clickRecf.position.contains(touchX, touchY) && clickRecf.id == "page2") {
                hide = true
                break
            }
        }
        if (done) {
            this.showDrawerTips()
        } else if (hide) {
            let canvas = context.$element('hilightCanvas')
            let ctx = canvas.getContext('2d')
            let canvasWidth = canvas.getBoundingClientRect().width
            let canvasHeight = canvas.getBoundingClientRect().height
            ctx.clearRect(0, 0, canvasWidth, canvasHeight);
            this.canShow = false
        }

    },
    showDrawerTips() {
        const context = this
        try {
            let canvas = context.$element('hilightCanvas')
            context.canvasColor = views.data.canvasColor
            let viewData = views.data.configList
            if (viewData == null || viewData.length < 1) {
                return
            }

            let ctx = canvas.getContext('2d')
            //设置高亮背景色
            ctx.fillStyle = context.canvasColor
            let canvasWidth = canvas.getBoundingClientRect().width
            let canvasHeight = canvas.getBoundingClientRect().height
            ctx.clearRect(0, 0, canvasWidth, canvasHeight);
            ctx.fillRect(0, 0, canvasWidth, canvasHeight);
            // 绘制高亮部分
            for (var i = 0; i < viewData.length; i++) {
                let hightLightConfig = viewData[i]
                if (!hightLightConfig.isDraw) {
                    context.drawArrowAndText(ctx, hightLightConfig, canvasWidth, canvasHeight)
                    //画下方的按钮
                    var rectButton = new Rect((canvasWidth / 2 - 50), (canvasHeight - 60), 100, 40);
                    context.clickButton.splice(0)
                    context.clickButton.push({
                        position: rectButton,
                        id: "page2"
                    })
                    context.drawRoundedRect(rectButton, 20, ctx, "#FFFFFF", "我知道了")
                }
            }
        } catch (err) {
            console.log("测试打印===err 1===" + err)
        }
    },
    drawArrowAndText(ctx, hightLightConfig, canvasWidth, canvasHeight) {
        //设置高亮背景色
        ctx.fillStyle = this.canvasColor
        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
        ctx.fillRect(0, 0, canvasWidth, canvasHeight);

        // 绘制弧形虚线箭头的线
        ctx.beginPath();
        ctx.fillStyle = "#FFFFFF"
        ctx.setLineDash([5, 5]);
        let lineMarginTop = 30 // 绘制的箭头距离左测button底部的偏移量
        let lineMarginLeft = 40 // 绘制的箭头距离左测button右边的偏移量
        let lineRadius = 30 // 绘制的箭头弧形半径
        let startX = (hightLightConfig.left + hightLightConfig.width - lineMarginLeft)
        let startY = hightLightConfig.top + hightLightConfig.height + lineMarginTop;
        ctx.moveTo(startX, startY);
        ctx.arcTo(startX + lineRadius, startY, startX + lineRadius, startY + lineRadius, lineRadius);
        ctx.stroke();

        ctx.beginPath();
        ctx.fillStyle = "#FFFFFF"
        ctx.setLineDash([]);
        ctx.moveTo(startX + lineRadius - 3, startY + lineRadius);
        ctx.lineTo(startX + lineRadius + 3, startY + lineRadius);
        ctx.lineTo(startX + lineRadius, startY + lineRadius + 5.1);
        ctx.closePath();
        ctx.stroke();

        ctx.beginPath();
        ctx.fillStyle = "#FFFFFF";
        ctx.font = "normal bold 20px Arial,sans-serif";
        ctx.textAlign = "left";
        ctx.textBaseline = "middle";

        let text = "侧边栏请点击这里也可以打开哦";
        let textMarginRight = 20 // 绘制的文字距离屏幕右边的距离
        let textOffsetArrowRight = 15 // 绘制的箭头距离虚线右边的距离
        let textOffsetArrowBottom = 45 // 绘制的箭头距离虚线底部的距离
        let textNextLineMargin = 25 // 绘制的文字下一行与上一行之间的间距

        let beginX = (startX + textOffsetArrowRight)
        let maxWidth = canvasWidth - beginX - textMarginRight
        let beginY = startY + textOffsetArrowBottom
        let tempArr = [0]

        var tempStart = 0

        //处理文字过多的情况 记录文字达到边界时的index 到时手动换行
        for (var j = 1; j < text.length; j++) {
            var tempStr = text.substring(tempStart, j)
            var tempWidth = ctx.measureText(tempStr).width
            if (tempWidth >= maxWidth) {
                tempStart = j
                tempArr.push(j)
            }
        }
        tempArr.push(text.length)
        var addY = 0 // 每一行文字距离最开始绘制的时候的距离
        //处理文字过多的情况 根据记录的index 手动将文字分割多行绘制
        for (var m = 0; m < (tempArr.length - 1); m++) {
            var start = tempArr[m]
            var end = tempArr[(m + 1)]
            ctx.fillText(text.substring(start, end), beginX, (beginY + addY));
            addY = addY + textNextLineMargin
        }


    },
    childToParentClicked(e) {
        const context = this
        context.canShow = e.detail.canShow
        let type = e.detail.type
        if (type == "showDrawer") {
            context.showDrawerHighLight(e)
        }
    },
    showDrawerHighLight(e) {
        const context = this
        try {
            this.canShow = e.detail.canShow
            setTimeout(function () {
                let canvas = context.$element('hilightCanvas')
                let ctx = canvas.getContext('2d')
                //设置高亮背景色
                ctx.fillStyle = context.canvasColor
                let viewData = e.detail.list
                if (viewData == null || viewData.length < 1) {
                    return
                }
                let canvasWidth = canvas.getBoundingClientRect().width
                let canvasHeight = canvas.getBoundingClientRect().height
                ctx.clearRect(0, 0, canvasWidth, canvasHeight);
                ctx.fillRect(0, 0, canvasWidth, canvasHeight);
                // 绘制高亮部分
                for (var i = 0; i < viewData.length; i++) {
                    let hightLightConfig = viewData[i]
                    if (hightLightConfig.isDraw) {
                        ctx.clearRect(hightLightConfig.left, hightLightConfig.top, hightLightConfig.width, hightLightConfig.height);
                    }
                }
            }, 100)
        } catch (err) {
            console.log("测试打印===showDrawerHighLight  err===" + err)
        }
    },
    onBackPress() {
        const context = this
        if (context.canShow) {
            context.canShow = false
            return true
        } else {
            return false
        }
    },
}
